/*------------------------------------
  Clients
------------------------------------*/
.u-clients {
  &__item {
    border: {
      width: 1px 0 1px 1px;
      color: $g-hr-color;
      style: solid;
    }
    padding: map-get($g-spacers, 7) 0;
  }

  &__image {
    @include px-to-rem(width, 120px);
    @include px-to-rem(margin-left, auto);
    @include px-to-rem(margin-right, auto);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    opacity: .3;
    transition: all 0.3s ease;

    &:hover {
      filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
      -webkit-filter: grayscale(0%);
      opacity: 1;
    }
  }
}